{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highcharts Demos\n",
    "================\n",
    "Basic bar: http://www.highcharts.com/demo/bar-basic\n",
    "---------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;width:750px;height:600px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {&quot;text&quot;: &quot;Source: &lt;a href=\\&quot;https://en.wikipedia.org/wiki/World_population\\&quot;&gt;Wikipedia.org&lt;/a&gt;&quot;}, &quot;xAxis&quot;: {&quot;categories&quot;: [&quot;Africa&quot;, &quot;America&quot;, &quot;Asia&quot;, &quot;Europe&quot;, &quot;Oceania&quot;], &quot;title&quot;: {&quot;text&quot;: null}}, &quot;title&quot;: {&quot;text&quot;: &quot;Stacked bar chart&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {&quot;title&quot;: {&quot;text&quot;: &quot;Population (millions)&quot;, &quot;align&quot;: &quot;high&quot;}, &quot;labels&quot;: {&quot;overflow&quot;: &quot;justify&quot;}, &quot;min&quot;: 0}, &quot;chart&quot;: {&quot;width&quot;: 750, &quot;renderTo&quot;: &quot;container&quot;, &quot;height&quot;: 600}, &quot;tooltip&quot;: {&quot;valueSuffix&quot;: &quot; millions&quot;}, &quot;plotOptions&quot;: {&quot;bar&quot;: {&quot;dataLabels&quot;: {&quot;enabled&quot;: true}}}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {&quot;verticalAlign&quot;: &quot;top&quot;, &quot;borderWidth&quot;: 1, &quot;backgroundColor&quot;: ((Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || &#x27;#FFFFFF&#x27;), &quot;x&quot;: -40, &quot;y&quot;: 80, &quot;layout&quot;: &quot;vertical&quot;, &quot;align&quot;: &quot;right&quot;, &quot;shadow&quot;: true, &quot;floating&quot;: true}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;data&quot;: [107, 31, 635, 203, 2], &quot;type&quot;: &quot;bar&quot;, &quot;name&quot;: &quot;Year 1800&quot;}, {&quot;data&quot;: [133, 156, 947, 408, 6], &quot;type&quot;: &quot;bar&quot;, &quot;name&quot;: &quot;Year 1900&quot;}, {&quot;data&quot;: [973, 914, 4054, 732, 34], &quot;type&quot;: &quot;bar&quot;, &quot;name&quot;: &quot;Year 2008&quot;}, {&quot;data&quot;: [1052, 954, 4250, 740, 38], &quot;type&quot;: &quot;bar&quot;, &quot;name&quot;: &quot;Year 2012&quot;}]\n",
       "            option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=600 width=750></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7ffba043ed10>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highchart\n",
    "H = Highchart(width=750, height=600)\n",
    "\n",
    "data1 = [107, 31, 635, 203, 2]\n",
    "data2 = [133, 156, 947, 408, 6]\n",
    "data3 = [973, 914, 4054, 732, 34]\n",
    "data4 = [1052, 954, 4250, 740, 38]\n",
    "\n",
    "options = {\n",
    "\t'title': {\n",
    "        'text': 'Stacked bar chart'\n",
    "    },\n",
    "    'subtitle': {\n",
    "        'text': 'Source: <a href=\"https://en.wikipedia.org/wiki/World_population\">Wikipedia.org</a>'\n",
    "    },\n",
    "    'xAxis': {\n",
    "        'categories': ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],\n",
    "        'title': {\n",
    "            'text': None\n",
    "        }\n",
    "    },\n",
    "    'yAxis': {\n",
    "        'min': 0,\n",
    "        'title': {\n",
    "            'text': 'Population (millions)',\n",
    "            'align': 'high'\n",
    "        },\n",
    "        'labels': {\n",
    "            'overflow': 'justify'\n",
    "        }\n",
    "    },\n",
    "    'tooltip': {\n",
    "        'valueSuffix': ' millions'\n",
    "    },\n",
    "    'legend': {\n",
    "        'layout': 'vertical',\n",
    "        'align': 'right',\n",
    "        'verticalAlign': 'top',\n",
    "        'x': -40,\n",
    "        'y': 80,\n",
    "        'floating': True,\n",
    "        'borderWidth': 1,\n",
    "        'backgroundColor': \"((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF')\",\n",
    "        'shadow': True\n",
    "    },\n",
    "    'credits': {\n",
    "        'enabled': False\n",
    "    },\n",
    "    'plotOptions': {\n",
    "        'bar': {\n",
    "            'dataLabels': {\n",
    "                'enabled': True\n",
    "            }\n",
    "        }\n",
    "    }\n",
    "}\n",
    "\n",
    "H.set_dict_options(options)\n",
    "\n",
    "H.add_data_set(data1, 'bar', 'Year 1800')\n",
    "H.add_data_set(data2, 'bar', 'Year 1900')\n",
    "H.add_data_set(data3, 'bar', 'Year 2008')\n",
    "H.add_data_set(data4, 'bar', 'Year 2012')\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
